import {
  AppstoreOutlined,
  CodeOutlined,
  ConsoleSqlOutlined,
  DatabaseOutlined,
  EditOutlined,
  FileOutlined,
  FormOutlined,
  HomeOutlined,
  LockOutlined,
  SecurityScanOutlined,
  ShareAltOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Menu, MenuProps } from 'antd';
import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate } from 'react-router-dom';

import GlobalSider from '@/components/GlobalSider';
import useTitle from '@/hooks/useTitle';

import MenuIcon from './MenuIcon';
import SwitchDarkMode from './SwitchDarkMode';
import SwitchLang from './SwitchLang';

const LdpiHeader: React.FC = () => {
  const title = useTitle();
  const location = useLocation();
  const navigate = useNavigate();
  const { t } = useTranslation();
  const [siderShow, setSiderShow] = useState(false);
  const routerKey = useMemo(() => location.pathname, [location]);
  const items: MenuProps['items'] = [
    {
      label: t('home'),
      key: '/',
      icon: <HomeOutlined />,
    },
    {
      label: t('instructions'),
      key: '/instructions',
      icon: <FormOutlined />,
    },
    {
      label: t('vulnerable'),
      key: 'Vulnerable',
      icon: <SecurityScanOutlined />,
      children: [
        {
          label: 'XSS',
          key: '/xss',
          icon: <EditOutlined />,
          children: [
            {
              label: 'Reflect',
              key: '/xss/reflect',
            },
            {
              label: 'Dom',
              key: '/xss/dom',
            },
            {
              label: 'Href',
              key: '/xss/href',
            },
            {
              label: 'Store',
              key: '/xss/store',
            },
          ],
        },
        {
          label: 'RCE',
          key: '/rce',
          icon: <CodeOutlined />,
          children: [
            {
              label: 'Ping',
              key: '/rce/ping',
            },
            {
              label: 'Exec',
              key: '/rce/exec',
            },
          ],
        },
        {
          label: 'CSRF',
          key: '/csrf',
          icon: <ShareAltOutlined />,
          children: [
            {
              label: 'Low',
              key: '/csrf/low',
            },
            {
              label: 'Mid',
              key: '/csrf/mid',
            },
          ],
        },
        {
          label: 'SQLI',
          key: '/sqli',
          icon: <ConsoleSqlOutlined />,
          children: [
            {
              label: 'String',
              key: '/sqli/string',
            },
            {
              label: 'Number',
              key: '/sqli/number',
            },
          ],
        },
        {
          label: 'FILE',
          key: '/fileUpload',
          icon: <FileOutlined />,
          children: [
            {
              label: 'Upload',
              key: '/file/upload',
            },
            {
              label: 'Download',
              key: '/file/download',
            },
          ],
        },
        {
          label: 'BURST',
          key: '/burst',
          icon: <LockOutlined />,
          children: [
            {
              label: 'Normal',
              key: 'burst/normal',
            },
            {
              label: 'Delay',
              key: 'burst/delay',
            },
            {
              label: 'Limit',
              key: 'burst/limit',
            },
          ],
        },
        {
          label: 'SCENE',
          key: '/scene',
          icon: <AppstoreOutlined />,
        },
      ],
    },
    {
      label: t('database'),
      key: '/database',
      icon: <DatabaseOutlined />,
    },
    {
      label: t('user'),
      key: '/user',
      icon: <UserOutlined />,
    },
  ];

  // 收起侧边栏
  const foldSider = () => {
    setSiderShow(false);
  };

  // 选择完成跳转路由并收起侧边栏
  const onSelect = ({ key }: any) => {
    navigate(key);
    foldSider();
  };

  return (
    <div className="flex justify-center items-center w-react h-20">
      {siderShow && (
        <GlobalSider
          show={siderShow}
          foldSider={foldSider}
          children={
            <>
              <SwitchLang className="absolute left-[65px] w-[20px] h-[80px] ml-6 hover:bg-transparent" />
              <SwitchDarkMode className="absolute left-[120px] w-[20px] h-[80px] ml-6 hover:bg-transparent" />
              <Menu mode="inline" items={items} selectedKeys={[routerKey]} onSelect={onSelect} />
            </>
          }
        />
      )}
      <MenuIcon siderShow={siderShow} onClick={() => setSiderShow(!siderShow)} />
      <h2 className="block leading-[80px] text-2xl font-bold cursor-pointer">{title}</h2>
    </div>
  );
};

export default LdpiHeader;
